<template>
  <div class="data-profile">
    <div class="block">
      <span class="demonstration">选择时间段</span>
      <el-date-picker
        v-model="datetime"
        type="datetimerange"
        range-separator="~"
        start-placeholder="请选择开始时间"
        end-placeholder="请选择结束时间"
      />
    </div>
    <div class="echarts">
    <div style="width: 100%; height: 300px;" ref="chartRef"></div>
  </div>
   <div class="bottm">
    <el-button plain @click="open1"> 导出 </el-button>
    </div>
    <el-table :data="tableData" height="250" style="width: 100%">
      <el-table-column prop="date" label="数据类型" width="270" />
      <el-table-column prop="name" label="新增居民数量" width="270" />
      <el-table-column prop="contract" label="新增签约量" width="270"/>
      <el-table-column prop="service" label="新增服务量" width="270"/>
      <el-table-column prop="total" label="合计" />
    </el-table>
      <div class="box1" style="width: 370px; height: 340px" ref="chartDef"></div>
      <div class="box2" style="width: 370px; height: 340px" ref="chartCef"></div>
      <div class="box3" style="width: 370px; height: 340px" ref="chartEef"></div>
      <div class="box4" style="width: 370px; height: 340px" ref="chart"></div>
      <div class="box5" style="width: 750px; height: 340px" ref="chartm"></div>
  </div>
</template>
<script >
import * as echarts from 'echarts';
export default {
  name: 'DataProfile',
  data() {
    return {
      datetime: [
      ],
      tableData:[
  {
    date: '2021-01-04',
    name: '119',
    contract: '119',
    service: '119',
    total: '119'
  },
  {
    date: '2021-01-05',
    name: '100',
    contract: '100',
    service: '100',
    total: '100'
  },
  {
    date: '2021-01-06',
    name: '150',
    contract: '150',
    service: '150',
    total: '150'
  },
  {
    date: '2021-01-07',
    name: '146',
    contract: '146',
    service: '146',
    total: '146'
  },
  {
    date: '2021-01-08',
    name: '134',
    contract: '134',
    service: '134',
    total: '134'
  },
  {
    date: '2021-01-09',
    name: '120',
    contract: '120',
    service: '120',
    total: '120'
  },
  {
    date: '2021-01-10',
    name: '109',
    contract: '109',
    service: '109',
    total: '109'
  },
]
    }
  },
  methods: {
    open1(){
      alert('导出成功')
    }
  },
  mounted() {
const myChart = echarts.init(this.$refs.chartRef);
const myChart1 = echarts.init(this.$refs.chartDef);
const myChart2 = echarts.init(this.$refs.chartCef);
const myChart3 = echarts.init(this.$refs.chartEef);
const myChart4 = echarts.init(this.$refs.chart);
const myChart5 = echarts.init(this.$refs.chartm);
const option = {
  title: {
    text: '数据概况'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['居民数量', '签约量', '服务量']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['1/4', '1/5', '1/6', '1/7', '1/8', '1/9', '1/10']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '居民数量',
      data: [550, 430, 863, 618, 635, 447, 560],
      type: 'line'
    },
    {
      name: '签约量',
      data: [330, 410, 614, 508, 569, 237, 250],
      type: 'line'
    },
    {
      name: '服务量',
      data: [190, 150, 804, 398, 115, 427, 240],
      type: 'line'
    }
  ],
};
const option1 = {
   title: {
    text: '居民年龄构成',
    left: 'center'
    
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '80%',
    left: 'center'
  },
  series: [
    {
      name: '居民数量',
      type: 'pie',
      radius: ['40%', '50%'],
      avoidLabelOverlap: true,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '10',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 30, name: '10岁以下' },
        { value: 335, name: '10-30岁' },
        { value: 880, name: '30-40岁' },
        { value: 484, name: '40-50岁' },
        { value: 120, name: '50岁以上' }
      ]
    }
  ]
};
const option2 = {
   title: {
    text: '居民学历构成',
    left: 'center'
    
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '80%',
    left: 'center'
  },
  series: [
    {
      name: '居民学历',
      type: 'pie',
      radius: ['40%', '50%'],
      avoidLabelOverlap: true,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '10',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 148, name: '小学学历' },
        { value: 535, name: '初中学历' },
        { value: 380, name: '高中学历' },
        { value: 1584, name: '大专/大学' },
        { value: 10, name: '大学以上' },
        { value: 300, name: '不详' },
      ]
    }
  ]
};
const option3 = {
   title: {
    text: '居民性别构成',
    left: 'center'
    
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '80%',
    left: 'center'
  },
  series: [
    {
      name: '居民性别',
      type: 'pie',
      radius: ['40%', '50%'],
      avoidLabelOverlap: true,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '10',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1348, name: '男' },
        { value: 1535, name: '女' },
      ]
    }
  ]
};
const option4 = {
  title: {
    text: '居民健康状态标签'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['高血压', '高血脂', '高血糖', '冠心病', '多动症', '慢性疾病']
  },
  series: [
    {
      type: 'bar',
      data: [200, 23, 34, 147, 44, 330]
    }
  ]
};
const option5 = {
   title: {
    text: '服务包使用情况'
  },
  xAxis: {
    type: 'category',
    data: [
      '高龄护理包',
      '基础包1',
      '基础包2',
      '基础包3',
      '基础包4',
      '儿童护理包',
      '高级特需包'
    ]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

  option && myChart.setOption(option);
  option && myChart1.setOption(option1);
  option && myChart2.setOption(option2);
  option && myChart3.setOption(option3);
  option && myChart4.setOption(option4);
  option && myChart5.setOption(option5);
  },
}

</script>

<style lang="less" scoped>
.demonstration{
  padding-right: 20px;
}
.echarts{
  width: 100%;
  height: 300px;
  margin-top: 20px;
  border: 1px solid white;
  margin-bottom: 30px;
}
.box1{
    float: left;
    margin-right: 15px;
    margin-left: 15px;
    margin-top: 30px;
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
    padding-top: 10px;
  }
  .box2{  
    float: left;
    margin-right: 15px;
     margin-top: 30px;
     padding-top: 10px;
      box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
  }
  .box3{
    float: left;
    margin-right: 35px;
     margin-top: 30px;
     padding-top: 10px;
      box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
  }
  .box4{
    float: left;
    margin-left: 15px;
    margin-right: 15px;
     margin-top: 30px;
     padding-top: 10px;
      box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
  }
  .box5{
    float: left;
    margin-right: 35px;
     margin-top: 30px;
     padding-top: 10px;
      box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
  }
.echarts:hover{
			box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
}
.bottm{
  margin-top: 30px;
  margin-bottom: 20px;
  margin-left: 1050px;
  :hover{
    color: blue;
    border: 1px solid blue;
  }
}

</style>
